/*
  学习目标：自定义表单控件-改为受控组件 
  💥 把value和onChange，托管给Form组件，Form源码内部会给自动接管你的value和onChange
  https://ant.design/components/form-cn/#components-form-demo-customized-form-controls
  1. 形参上定义value和onChange
  2. value和onChange传给Select即可
  3. 透传props 原封不动的扔给Select组件
*/

import { Select } from 'antd';
import { getChannelsList } from 'api/channels';
import React, { useEffect, useState } from 'react'
const {Option}=Select
// 1.新建Channel组件
export default function Channel(props) {
    // 2. 复制state  声明周期  JSX
    const [channelsList, setChannelsList] = useState([])
  const getChannels=async ()=>{
    const res=await getChannelsList()
    console.log('res  ----->  ', res);
    setChannelsList(res.data.channels)
  }
  useEffect(() => {
    // 挂载会发送请求
    getChannels()
  }, [])
  return (
    <Select {...props}>
            {channelsList.map((item)=>{
              return <Option key={item.id} value={item.id}>{item.name}</Option>
            })}
          </Select>
  )
}
